  // 1.1 获取裁剪区域的 DOM 元素
  const $image = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  $image.cropper(options)

//   需求一：头像上传
//   1.选择图片   2.渲染图片   3.上传图片

$('#imgBtn').on('click',function(){
    $('#imgInp').click()
})

// 2.渲染图片
$('#imgInp').on('change',function(){
    // 获取文件对象
    let file = this.files[0]
    // 非空校验
    if(file==undefined){
        return layui.layer.msg('请先上传图片')
    }
    // 将该文件对象转为可获取的url()
    let newImgUrl = URL.createObjectURL(file)
    // 将内存生成的图片路径url展示至预览区
    $image.cropper("destroy").attr('src',newImgUrl).cropper(options)
})

// 3.上传图片
$('#uploadImgBtn').on('click',function(){
    // 后端要求上传的头像格式为base64，这里需要将$image中预览图片转换为base64
    let dataURL = $image.cropper('getCroppedCanvas',{
        width:100,
        height:100
    }).toDataURL('img/png')
    // 发送请求，发送数据
    axios({
        method:'POST',
        url:'/my/update/avatar',
        data:"avatar="+encodeURIComponent(dataURL)
    }).then(({data:res})=>{
        // console.log(res);
        if(res.status!=0){
            return layui.layer.msg(res.message)
        }
        layui.layer.msg('恭喜您，更换头像成功')
        window.parent.getUserInfo()
    })
})